<template>
  <header class="atd__header">
    <div class="atd__header--toggle-menus" @click="toggleCollapse">
      <i v-if="collapse" class="atd-icon expand-icon"></i>
      <i v-else class="atd-icon packup-icon"></i>
    </div>
    <div class="atd__header--user">
      <div class="atd__header--username">{{username}}</div>
      <div class="atd__header--avatar">
        <v-avatar :src="userAvatar" />
      </div>
    </div>
  </header>
</template>

<script>
  import { fixAvatarPath } from '@/utils/tools';
  import Emitter from '@/vuego/mixins/emitter';

  export default {
    name: 'atd-header',
    componentName: 'AtdHeader',
    props: ['user'],
    mixins: [Emitter],
    data() {
      return {
        collapse: false,
      };
    },
    computed: {
      username() {
        return this.user.name ? this.user.name : '';
      },
      userAvatar() {
        return fixAvatarPath(this.user.avatar);
      },
    },
    methods: {
      toggleCollapse() {
        this.collapse = !this.collapse;
        this.dispatch('atd', 'collapse', this.collapse);
      },
    },
  };
</script>
